<!--异步列表滚动-->
<template>
  <scroller lock-x
            ref="scroller"
            height="-40"
            @on-scroll-bottom="getList"
            :scroll-bottom-offst="200">
    <div class="list-scroller">
      <slot name="item" v-for="item in list" :data="item"></slot>
    </div>
    <load-more v-if="!isEnd" tip="loading"></load-more>
  </scroller>
</template>

<script>
  import axios from 'axios'
  import { Scroller, LoadMore } from 'vux'

  export default {
    name: 'list-scroller',
    props: {
      api: {
        type: String,
        required: true
      },
      searchParams: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        start: 1,
        count: 20,
        scroller: null,
        isLoading: false,
        isEnd: false,
        list: []
      }
    },
    components: {
      Scroller,
      LoadMore
    },
    mounted () {

    },
    created () {
      this.getList()
    },
    watch: {},
    methods: {
      getList (data) {
        if (this.isLoading || this.isEnd) {

        } else {
          this.isLoading = true
          axios.get(this.api, {
            params: {
              start: this.start,
              count: this.count,
              ...this.searchParams
            }
          }).then(res => {
            if (res.data.subjects.length < this.count) {
              this.isEnd = true
            }
            this.list = [...this.list, ...res.data.subjects]
            // 确保在你的数据更新后进行reset操作
            this.start += this.count
            this.$nextTick(() => {
              this.$refs.scroller.reset()
            })
            this.isLoading = false
          })
        }
      }
    }
  }
</script>

<style lang="scss">

</style>
